<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>后台管理</title>
	<style type="text/css">
		header{
			position:absolute;
			width:100%;
			background: rgb(122, 30, 50, 0.3);	
		}
		.log{
			float:left;
			height:80px;
			width:300px;
			background-image: url(../images/log.png);
		}
		.class{
			float:left;
			height:80px;
			width:900px;
			background-color:#888ccc;
			letter-spacing:14px;
			margin-left:40px;
			font-size:3.5em;
			text-align:center;
			line-height:80px;
		@font-face{
			font-family:侍;
			src:../侍.ttf;
			}
		}
		.classA{
			float:right;
			height:60px;
			width:380px;
			margin-top:10px;
			background-color:rgb(60, 30, 60, 0.5);
		}
		
		input{
			float:left;
			margin-left:10px;
			height:53px;
			width:250px;
		}
		button{
			float:left;
			height:59px;
			width:110px;
		}
		.user{
			float:left;
			height:80px;
			width:200px;
			margin-left:50px;
			background-color:rgb(30, 30, 60, 0.4);
		}
		.user-on{
			float:left;
			height:50px;
			width:50px;
			border-radius:50%;
			border:5px solid red;
			margin-left:75px;
		}
		.user-bottom{
			margin-left:55px;
			height:20px;
			width:100px;
			margin-top:60px;
			background-color:rgb(30, 40, 50, 0.4);
		}
		
		ul,li{
			list-style: none;
			line-height: 30px;
			margin: 0;
			padding: 0;
			cursor:pointer;/*手形鼠标指针*/
		}
		a{
			text-decoration: none;
			color: #000;
		}
		.first{
			background-color: #ddd;
			color: #333;
			padding-left: 30px;
			font-size: 30sp;
			font-weight: 900;
		}

		.l>li{
			margin: 10px 0;
			padding-left: 50px;
	
		}
		.l>li:hover{
			background-color: #aaa;
		}
		
		.menu-box{
			float:left;
			height:920px;
			width:200px;
			background-color:rgb(50, 20, 30, 0.4);
			margin-top:100px;
		}
		/*ul{
			position:relative;
			margin-top:0px;
			height:60px;
			width:150px;
			letter-spacing:14px;
			line-height:60px;
			background-color:rgb(40, 40, 100, 0.3);
		}
		
		.footer{
			height:400px;
			width:100%;
			margin-top:1000px;
			background-color:#eeefff;
			position:absolute;
		}
		
	</style>
	</head>
	<body>
		<header>
			<div class="log"></div>
			<div class="class"><em><strong>后台管理系统</strong></em>
				<div class="classA">
					<!-- 搜索表单 -->
					<form>
						<input type="text" placeholder="搜索..." style="font-size:0.7em;letter-spacing:8px;" name="search"><button type="submit" style="font-size:0.4em;letter-spacing:14px;text-align:center;">搜索</button>
					</form>
				</div>
			</div>
			<div class="user">
				<div class="user-on">头像</div>
				<div class="user-bottom">ID:001</div>
			</div>
		</header>
		<div class="menu-box">
			<ul class="u">
				<li class="first">商品管理</li>
				<li>
					<ul class="l">
						<li><a href="#">查看商品</a></li>
						<li><a href="#">添加商品</a></li>
						<li><a href="#">删除商品</a></li>
						<li><a href="#">修改商品</a></li>
					</ul>
				</li>
				<li class="first">用户管理</li>
				<li>
					<ul class="l">
						<li><a href="user.html" target="right-window">查看用户</a></li>
						<li><a href="#">添加用户</a></li>
						<li><a href="#">修改用户</a></li>
						<li><a href="#">注销用户</a></li>	
					</ul>
				</li>
				<li class="first">订单管理</li>
				<li>
					<ul class="l">
						<li><a href="#">查看订单</a></li>
						<li><a href="#">添加订单</a></li>
						<li><a href="#">删除订单</a></li>
						<li><a href="#">找回订单</a></li>
					</ul>
				</li>
				<li class="first">支付管理</li>
				<li>
					<ul class="l">
						<li><a href="#">查看支付</a></li>
						<li><a href="#">支付方式</a></li>
						<li><a href="#">支付设置</a></li>
					</ul>
				</li>
				<li class="first">售后管理</li>
				<li>
					<ul class="l">
						<li><a href="#">服务热线</a></li>
						<li><a href="#">友情提醒</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="footer">页脚</div>
	</body>
</html>